<template>
  <div class="m-theFollowUp">
    <div class="m-searchPanel m-searchPanelA">
      <div class="layout-2">
        <el-form :model="searchForm" class="demo-form-inline" :inline="true" ref="refSearchForm">
          <el-row :gutter="30">
            <el-col :span="6">
              <el-form-item label="活动平台" prop="platform">
                <el-select v-model="searchForm.platform" placeholder="请选择" clearable>
                  <el-option label="GTS2" value="GTS2"></el-option>
                  <el-option label="MT4" value="MT4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="活动编号" prop="activityPeriods">
                <el-input placeholder=" " v-model.trim="searchForm.activityPeriods" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="5" class="searchBtns">
              <el-button type="primary" icon="el-icon-search" @click="search" :loading="dataListLoading">查询</el-button>
              <el-button type="primary" plain icon="el-icon-refresh" @click="reset">重置</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="" class="select-timepick">
                <el-select v-model="searchForm.typetimeFH" placeholder="请选择" style="width: 140px;">
                  <el-option label="参与活动时间" value="join"></el-option>
                </el-select>
                <el-date-picker
                  v-model="searchForm.timeFH"
                  type="datetimerange"
                  :unlink-panels="true"
                  :default-time="['00:00:00','23:59:59']"
                  format="yyyy-MM-dd HH:mm:ss"
                  :time-arrow-control="true"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="m-dataList">
      <el-table
        :data="dataList"
        v-loading="dataListLoading"
        element-loading-text="loading..."
        style="width: 100%"
        ref="dataList"
      >
        <el-table-column
          prop="account_no"
          width="120"
          label="客户账号">
        </el-table-column>
        <el-table-column
          prop="activity_periods"
          label="活动编号">
        </el-table-column>
        <el-table-column
          prop="activity_name"
          label="活动名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="platform"
          label="活动平台"
          width="120">
        </el-table-column>
        <el-table-column
          prop="is_blacklist"
          label="白名单活动"
          width="100">
          <template slot-scope="scope">
            <span>{{scope.row.is_blacklist | isBlacklist}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="start_time"
          :formatter="countTimeFormat"
          label="开始时间"
          width="160">
        </el-table-column>
        <el-table-column
          prop="end_time"
          label="结束时间"
          :formatter="countTimeFormat"
          width="160">
        </el-table-column>
        <el-table-column
          prop="join_time"
          label="参与活动时间"
          :formatter="countTimeFormat"
          width="160">
        </el-table-column>
        <el-table-column
          prop="settle_time"
          label="结算时间"
          :formatter="countTimeFormat"
          width="160">
        </el-table-column>
        <el-table-column
          prop="gold_amount"
          label="赠金金额"
          align="right"
          :formatter="countDateMoneyFormat"
          min-width="80">
        </el-table-column>
        <el-table-column
          prop="require_lot"
          label="取现手数"
          width="80">
        </el-table-column>
        <el-table-column
          prop="finish_lot"
          label="完成手数"
          width="80">
        </el-table-column>
        <el-table-column
          prop="token_amount"
          label="代币金额"
          align="right"
          :formatter="countDateMoneyFormat"
          min-width="80">
        </el-table-column>
        <el-table-column
          prop="token_expired_time"
          label="代币到期时间"
          :formatter="countTimeFormat"
          width="160                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           ">
        </el-table-column>
      </el-table>
    </div>
    <div class="m-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes=pagination.pageSizeList
        :current-page=pagination.pageNo
        :page-size=pagination.pageSize
        layout="total, sizes, prev, pager, next"
        :total=pagination.total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import * as Utils from '@/utils'
  import * as LeadsAPI from '@/Api/lead';
  import * as RealaccountAPI from '@/Api/realaccount'
  export default {
    name: 'TheDemoActive',
    data () {
      return {
        searchForm: {
          timeFH: Utils.thisWeek(),
          typetimeFH: 'join',
          activityPeriods: '',
          platform: '',
        },
        copySearchForm:{},
        pagination: Utils.commonPagination(),
        pickerOptions: Utils.pickerOptions(),
        dataList: [],
        dataListLoading: false,
        ajaxSearchParams:{},
      }
    },
    props: ['type', 'form'],
    watch: {
      'searchForm.activityPeriods'(val){
        if (val) {
          this.searchForm.timeFH = null;
        } else {
          this.searchForm.timeFH = Utils.thisWeek();
        }
      }
    },
    computed:{
      queryId(){
          if(this.type == '1') {
              if(this.form == 'trade') {
                return this.$route.params.id.split('_')[1]
              }else  {
                return this.$route.params.id.split('_')[2]
              }
          } else  {
              return this.$route.params.id.split('_')[1]
          }
      }
    },
    filters:{
      isBlacklist(val){
          if(val == '0') {
              return '否'
          } else if(val == '1') {
              return '是'
          } else {
              return val;
          }
      }
    },
    methods: {
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        if (this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      handleCurrentChange(index) {
        this.pagination.pageNo = index;
        this.queryList();

      },
      countTimeFormat(row, column){
        return Utils.countDateTimeFormat(row[column.property])
      },
      queryList(){
        /*
         * 1、lead-demo-营销系统活动
         * 2、真实帐号-demo-营销系统活动
         * 3、真实帐号-交易平台-参加活动-营销系统活动
         *
         * */
        this.dataListLoading = true;
        let ajaxAddress = null;
        if (this.type == '1') {
          if (this.form == 'trade') {
            ajaxAddress = RealaccountAPI.realaccountInfo2_2_2
          } else {
            ajaxAddress = RealaccountAPI.realaccountInfot3_2
          }
        } else if (this.type == '2') {
          ajaxAddress = LeadsAPI.leadInfo3_2;
        } else {
          console.log('参数有误，代码要蹦了');
          return
        }
        ajaxAddress(Object.assign({
          queryId: this.queryId,
          pageSize: this.pagination.pageSize,
          pageNo: this.pagination.pageNo - 1
        }, this.ajaxSearchParams))
          .then(res => {
            this.dataListLoading = false;
            if (res.code != '0') {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return
            }
            this.dataList = res.data.content;
            this.pagination.total = res.data.totalElements;
          })
          .catch(error => {
            this.dataListLoading = false;
            console.log(error)
          })
      },
      reset(){
        this.searchForm = Object.assign({}, this.copySearchForm);
      },
      search(){
        this.ajaxSearchParams = Utils.searchParamsFormat(this.searchForm);
        if (this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      countDateMoneyFormat(row, column){
        return Utils.countDateMoneyFormat(row[column.property])
      },
    },
    created() {
      this.copySearchForm = Object.assign({}, this.searchForm);
      this.search();
    }
  }
</script>

<style scoped lang="scss">
</style>
